<template>
    <div>
        <SearchTable
                :columns="columns"
                :data="list"
                :total="total"
                :page.sync="currentPage"
                :size.sync="pageSize"
                @change-page="changePage"
                @change-size="changePageSize">
            <template slot="select-group">
                <Select filterable
                        v-model="questionName"
                        placeholder="请选择题目"
                        @on-change="getQuestionSolveList(1)"
                        clearable
                        style="width:150px; margin-bottom: 10px;">
                    <Option v-for="item in allTargetList" :value="item.name" :key="item.id" :title="item.name">{{ item.name }}</Option>
                </Select>
            </template>
        </SearchTable>
        <Modal
                v-model="showModal"
                width="800"
                :title="title"
                footer-hide>
            <Select filterable
                    v-model="teamName"
                    placeholder="请选择团队"
                    filterable
                    clearable
                    @on-change="getQuestionSolveStatic(1)"
                    style="width:150px; margin-bottom: 10px;">
                <Option  v-for="item in accessGroupList" :value="item.name"  :key="item.id" :title="item.name">{{item.name}}</Option>
            </Select>
            <Table
                    border
                    :columns="staticColumns"
                    :data="staticList"></Table>
            <Page
                    :total="staticTotal"
                    :current="staticCurrentPage"
                    :page-size="staticPageSize"
                    show-total
                    show-elevator
                    class="page"
                    @on-change="staticChangePage"
                    @on-page-size-change="staticChangePageSize"></Page>
        </Modal>
    </div>
</template>

<script>
    import SearchTable from '@/components/SearchTable/SearchTable'
    import {
        getQuestionSolveList,
        getQuestionSolveStatic
    } from '@/api/compitionStatic'
    import {
        queryCtfTarget
    } from '@/api/drill_compete'
    import {
        getaccessgrouplist
    } from '@/api/access_new'

    export default {
        name: 'ctfQuestionSolveStatic',
        props: {},
        components:{
            SearchTable
        },
        data() {
            return {
                teamName: '', // 搜索条件， 团队名称
                questionName: '', // 搜索条件，题目名称
                accessGroupList: [], // 团队列表
                allTargetList: [], // 所有的题目
                questionId: '', // 题目ID
                finishStatus: 0, // 是否完成答题
                showModal: false, // 是否显示模态框
                title: '', // 模态框标题
                currentPage: 1, // 当前页
                pageSize: 10, // 分页大小
                total: 0, // 总记录数
                list: [], // 题目解答列表
                staticCurrentPage: 1, // 详情页当前页
                staticPageSize: 10, // 详情页分页大小
                staticTotal: 0, // 详情页总记录数
                staticList: [], // 详情页列表
                columns: [
                    {
                        placement: 'top-left',
                        title: '题目显示名称',
                        key: 'questionName',
                        align: 'center',
                        tooltip: true,
                        width: 230
                    },
                    {
                        title: '已攻破团队数',
                        width: 120,
                        key:'finishTeamTotal',
                        render:(h,params)=>{
                            return h('Button',{
                                props:{
                                    size: 'small',
                                    type: 'info'
                                },
                                class: 'tag',
                                on:{
                                    click:()=>{
                                        this.showModalFn(params.row.questionId, 1, params.row.questionName)
                                    }
                                }
                            }, params.row.finishTeamTotal)
                        }
                    },
                    {
                        title: '未攻破团队数',
                        width: 120,
                        key:'notFinishTeamTotal',
                        render:(h,params)=>{
                            return h('Button',{
                                props:{
                                    size: 'small',
                                    type: 'info'
                                },
                                class: 'tag',
                                on:{
                                    click:()=>{
                                        this.showModalFn(params.row.questionId, 0, params.row.questionName)
                                    }
                                }
                            }, params.row.notFinishTeamTotal)
                        }
                    },
                    {
                        title: '撤销团队数',
                        width: 120,
                        key:'cheatTeamTotal',
                        render:(h,params)=>{
                            return h('Button',{
                                props:{
                                    size: 'small',
                                    type: 'info'
                                },
                                class: 'tag',
                                on:{
                                    click:()=>{
                                        this.showModalFn(params.row.questionId, 2, params.row.questionName)
                                    }
                                }
                            }, params.row.cheatTeamTotal)
                        }
                    }
                ],
                staticColumns: []
            }
        },
        computed: {},
        mounted() {
            this.$nextTick(() => {
                this.sceneId = this.$route.query.id
                this.getAllTargetList()
                this.getAccessGroupList()
                this.getQuestionSolveList()
            })
        },
        methods: {
            // 获取所有团队
            getAccessGroupList(){
                if(!this.sceneId){
                    return;
                }
                getaccessgrouplist({
                    pageIndex: 1,
                    pageSize: 2147483647,
                    testId: this.sceneId
                }).then(({ code, data, message }) => {
                    if(code == 1){
                        // 夺旗赛过滤掉spare1组
                        let items = data.items || []
                        this.accessGroupList = items.filter(item => !item.spare)
                    } else {
                        this.$Message.warning(message);
                    }
                }).catch(() => {
                    this.$Message.error('获取团队列表异常');
                })
            },
            // 查询所有的题目
            getAllTargetList() {
                queryCtfTarget(this.sceneId, {
                    pageIndex: 1,
                    pageSize: 2147483647
                }).then(({ code, data, message }) => {
                    if(code==1){
                        this.allTargetList = data.items || [];
                    }else{
                        this.$Message.warning(message);
                    }
                }).catch(() => {
                    this.$Message.error('获取题目列表异常');
                })
            },
            // 显示模态框，重置所有数据
            showModalFn(questionId, finishStatus, title) {
                this.showModal = true
                this.title = title
                if (finishStatus === 1) {
                    this.staticColumns = [
                        {
                            title: '已攻破团队名',
                            key: 'teamName'
                        },
                        {
                            title: '攻破时间',
                            key: 'finishTime'
                        },
                        {
                            title: '得分',
                            key: 'score'
                        }
                    ]
                } else if (finishStatus === 2) {
                    this.staticColumns = [
                        {
                            title: '已撤销团队名',
                            key: 'teamName'
                        },
                        {
                            title: '攻破时间',
                            key: 'finishTime'
                        },
                        {
                            title: '题目分数',
                            key: 'ctfScore'
                        },
                        {
                            title: '撤销得分',
                            key: 'score'
                        }
                    ]
                } else {
                    this.staticColumns = [
                        {
                            title: '未攻破团队名',
                            key: 'teamName'
                        },
                        {
                            title: '状态',
                            render:(h, params) => {
                                return h('span', {
                                    style: {
                                        color: params.row.attackStatus === 0 ? '#515a6e' : '#ed4014'
                                    }
                                },params.row.attackStatus === 0 ? '未作答' : '提交错误' )
                            }
                        }
                    ]
                }
                this.questionId = questionId
                this.finishStatus = finishStatus
                this.teamName = ''
                this.staticCurrentPage = 1
                this.staticPageSize = 10
                this.getQuestionSolveStatic()
            },
            // 查询题目完成详情
            getQuestionSolveStatic(currentPage) {
                if (currentPage !== undefined) {
                    this.staticCurrentPage = currentPage
                }
                getQuestionSolveStatic({
                    pageIndex: this.staticCurrentPage,
                    pageSize: this.staticPageSize,
                    sceneId: this.sceneId,
                    questionId: this.questionId,
                    finishStatus: this.finishStatus,
                    teamName: this.teamName
                }).then(({ code, data, message }) => {
                    if (code === 1) {
                        let { total, items } = data || {}
                        this.staticTotal = total || 0
                        this.staticList = items || []
                    } else {
                        this.$Message.warning(message)
                    }
                }).catch(() => {
                    this.$Message.error('获取题目解答详情异常');
                })
            },
            // 查询题目完成情况列表
            getQuestionSolveList(currentPage) {
                if (currentPage !== undefined) {
                    this.currentPage = currentPage
                }
                getQuestionSolveList({
                    pageIndex: this.currentPage,
                    pageSize: this.pageSize,
                    sceneId: this.sceneId,
                    questionName: this.questionName
                }).then(({ code, data, message }) => {
                    if (code === 1) {
                        let { total, items } = data || {}
                        this.total = total || 0
                        this.list = items || []
                        console.log(this.list);
                    } else {
                        this.$Message.warning(message)
                    }
                }).catch(() => {
                    this.$Message.error('获取题目解答统计异常');
                })
            },
            changePage(val) {
                this.currentPage = val
                this.getQuestionSolveList()
            },
            changePageSize(val) {
                this.pageSize = val
                this.getQuestionSolveList()
            },
            staticChangePage(val) {
                this.staticCurrentPage = val
                this.getQuestionSolveStatic()
            },
            staticChangePageSize(val) {
                this.staticPageSize = val
                this.getQuestionSolveStatic()
            },
        },
        beforeDestroy() {
        },
        watch: {}
    }
</script>

<style scoped>
    .card-list >>> .tag {
        line-height: 20px;
        background: #e6f7ff;
        border-color: #91d5ff;
        color: #1890ff;
    }
    .page {
        padding: 15px 0;
        text-align: center;
    }
</style>